ইনপুট ফিল্ডস (<input>, <textarea>, <select>, <button>)

XHTML-এ ফর্ম এলিমেন্টগুলো ব্যবহার করে ব্যবহারকারীর ইনপুট সংগ্রহ করা হয়। ইনপুট ফিল্ডগুলোর মধ্যে রয়েছে <input>, <textarea>, <select>, এবং <button> ট্যাগগুলো, যা ওয়েব পেজে ব্যবহারকারী থেকে তথ্য গ্রহণ করতে ব্যবহৃত হয়। XHTML-এর ক্ষেত্রে, এই ট্যাগগুলোকে সঠিকভাবে ব্যবহারের জন্য কিছু বিশেষ নিয়ম অনুসরণ করতে হয়।

১. <input> ট্যাগ

<input> ট্যাগটি সবচেয়ে সাধারণ এবং বহুল ব্যবহৃত ফর্ম এলিমেন্ট। এটি বিভিন্ন ধরনের ইনপুট ফিল্ড তৈরি করতে ব্যবহার করা হয়, যেমন টেক্সট বক্স, চেকবক্স, রেডিও বাটন ইত্যাদি। XHTML-এ <input> ট্যাগের জন্য সবসময় বন্ধন চিহ্ন ( / ) ব্যবহার করতে হয়।

১.1 ট্যাগের উদাহরণ

<form action="submit_form.xhtml" method="post">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" />
    
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" />
    
    <label for="gender">Gender:</label>
    <input type="radio" id="male" name="gender" value="male" /> Male
    <input type="radio" id="female" name="gender" value="female" /> Female
    
    <label for="subscribe">Subscribe to Newsletter:</label>
    <input type="checkbox" id="subscribe" name="subscribe" />
    
    <input type="submit" value="Submit" />
</form>

ব্যাখ্যা:

• <input type="text">: একটি টেক্সট ইনপুট ফিল্ড তৈরি করে।
• <input type="email">: একটি ইমেইল ইনপুট ফিল্ড তৈরি করে, যা ইমেইল ঠিকানা গ্রহণ করে।
• <input type="radio">: রেডিও বাটন তৈরি করে, যা ব্যবহারকারীকে একাধিক অপশন থেকে একটি বেছে নিতে দেয়।
• <input type="checkbox">: চেকবক্স তৈরি করে, যা এক বা একাধিক অপশন চেক করার সুযোগ দেয়।
• <input type="submit">: একটি সাবমিট বাটন তৈরি করে, যা ফর্মটি সাবমিট করতে ব্যবহৃত হয়।

২. <textarea> ট্যাগ

<textarea> ট্যাগটি বড় আকারের ইনপুট ফিল্ড তৈরি করতে ব্যবহৃত হয়, যেখানে ব্যবহারকারী অনেক লাইন টেক্সট লিখতে পারেন। এটি সাধারণত মন্তব্য বা বিশদ তথ্য ইনপুট নেয়ার জন্য ব্যবহৃত হয়।

২.1 ট্যাগের উদাহরণ

<form action="submit_form.xhtml" method="post">
    <label for="message">Message:</label>
    <textarea id="message" name="message" rows="4" cols="50"></textarea>
    
    <input type="submit" value="Submit" />
</form>

ব্যাখ্যা:

• <textarea>: এটি একটি মাল্টি-লাইন টেক্সট ইনপুট ফিল্ড তৈরি করে, যেখানে ব্যবহারকারী বড় আকারের টেক্সট লিখতে পারেন।
• rows: ইনপুট ফিল্ডের উচ্চতা নির্ধারণ করে (লাইন সংখ্যা)।
• cols: ইনপুট ফিল্ডের প্রস্থ নির্ধারণ করে (কলাম সংখ্যা)।

৩. <select> ট্যাগ

<select> ট্যাগটি একটি ড্রপডাউন মেনু তৈরি করতে ব্যবহৃত হয়, যেখানে ব্যবহারকারী একটি অপশন নির্বাচন করতে পারে। এর মধ্যে <option> ট্যাগ ব্যবহার করে ড্রপডাউন তালিকা তৈরি করা হয়।

৩.1 ট্যাগের উদাহরণ

<form action="submit_form.xhtml" method="post">
    <label for="country">Country:</label>
    <select id="country" name="country">
        <option value="usa">United States</option>
        <option value="uk">United Kingdom</option>
        <option value="india">India</option>
        <option value="canada">Canada</option>
    </select>
    
    <input type="submit" value="Submit" />
</form>

ব্যাখ্যা:

• <select>: এটি একটি ড্রপডাউন মেনু তৈরি করে।
• <option>: এটি ড্রপডাউনে থাকা অপশনগুলো নির্ধারণ করে। ব্যবহারকারী একটি অপশন নির্বাচন করতে পারে।

৪. <button> ট্যাগ

<button> ট্যাগটি একটি বাটন তৈরি করতে ব্যবহৃত হয়, যা ফর্ম সাবমিট, স্ক্রিপ্ট চালানো বা অন্য কোন কার্যকলাপ সম্পাদন করার জন্য ব্যবহৃত হতে পারে। <button> ট্যাগটি আরও বেশি কাস্টমাইজেশন প্রদান করে, কারণ এর মধ্যে HTML কন্টেন্ট, যেমন টেক্সট, চিত্র বা অন্য কোন উপাদান থাকতে পারে।

৪.1 ট্যাগের উদাহরণ

<form action="submit_form.xhtml" method="post">
    <button type="submit">Submit Form</button>
    <button type="button" onclick="alert('Button clicked!')">Click Me</button>
</form>

ব্যাখ্যা:

• <button type="submit">: এটি একটি সাবমিট বাটন তৈরি করে, যা ফর্মটি সাবমিট করতে ব্যবহৃত হয়।
• <button type="button" onclick="alert('Button clicked!')">: এটি একটি সাধারণ বাটন, যার ওপর ক্লিক করলে একটি জাভাস্ক্রিপ্ট ফাংশন রান করবে।

৫. XHTML-এর নিয়মাবলী

XHTML-এ ইনপুট ফিল্ড এবং বাটন সম্পর্কিত কিছু বিশেষ নিয়ম রয়েছে, যা HTML-এ সাধারণত প্রয়োগ হয় না। সেগুলো হল:

৫.1 কেস সেনসিটিভিটি

XHTML-এ সব ট্যাগের নাম এবং অ্যাট্রিবিউট ছোট হাতের অক্ষরে লিখতে হয়। যেমন: <input type="text" />।

৫.2 ট্যাগ বন্ধন

XHTML-এ একক ট্যাগগুলোর (যেমন <input>, <br>, <img>) বন্ধন চিহ্ন ব্যবহার করতে হয়, যেমন: <input type="text" />।

৫.3 অ্যাট্রিবিউট কোটেশন

এটা নিশ্চিত করতে হবে যে সব অ্যাট্রিবিউটের মান কোটেশনে থাকবে, যেমন: <input type="text" name="username" />।

XHTML-এ ইনপুট ফিল্ড তৈরি করার জন্য বিভিন্ন ট্যাগ যেমন <input>, <textarea>, <select>, এবং <button> ব্যবহৃত হয়। এই ট্যাগগুলো ব্যবহার করে ফর্ম ইনপুট সংগ্রহ করা যায় এবং বিভিন্ন ধরণের ফিল্ড যেমন টেক্সট বক্স, রেডিও বাটন, চেকবক্স, ড্রপডাউন মেনু ইত্যাদি তৈরি করা সম্ভব। XHTML-এ ট্যাগগুলোর সঠিকভাবে বন্ধন চিহ্নসহ ব্যবহার এবং কোটেশনে অ্যাট্রিবিউট লেখা অত্যন্ত গুরুত্বপূর্ণ।